<template>
  <div id="content" :style="{height:contentHeight+'px'}">
    <Card>
      <Select style="width: 240px;" v-model="page.projectId" @on-change="searchUser" clearable placeholder="所属项目">
        <Option v-for="item in projectList" :key="item.id" :value="item.id">{{ item.projectName }}</Option>
      </Select>
      <Select style="width: 240px;margin-left: 5px;" v-model="searchKey" clearable @on-clear="searchKeyClear"
              placeholder="精确匹配查询参数">
        <Option v-for="item in searchParamList" :key="item.key" :value="item.key">{{ item.show }}</Option>
      </Select>
      <Input v-model="searchValue" placeholder="请输入查询内容..." @on-keyup="enterSearchUser" clearable
             style="width: 300px;margin-left: 5px;"/>
      <Button @click="searchUser" type="primary" style="width: 100px;margin-left: 5px;">查询</Button>
      <Button class="filter-item" @click="newUser" type="primary" style="width: 100px;margin-left: 5px;">用户新建
      </Button>
    </Card>
    <Divider/>
    <Table id="card-list-info-table" class="table" stripe
           border
           show-header
           highlight-row
           :loading="isLoading"
           :columns="tableColumns"
           :data="dataList">
    </Table>
    <Divider/>
    <Card style="margin-bottom: 15px;">
      <Page class="r-w-c-c"
            class-name="card-list-info-page"
            style="width: 100%"
            :total="page.total"
            :current="page.pageNum"
            :page-size="page.pageSize"
            @on-change="onPageChange"
            @on-page-size-change="onPageSizeChange"
            show-elevator
            show-sizer
            show-total/>
    </Card>
    <Modal v-model="isMessageModalShow" :title="modalTitle">
      <Form ref="userFormRule" :rules="ruleValidate" :model="userForm" style="margin-left: 0;width: 100%;"
            :label-width="80" label-position="right">
        <div class="r-n-fs-c item-input" style="position: relative">
          <span
              style="position: absolute;left: 2px;color: #ed4014;font-size: 14px;top: 21px;font-family: 'SimSun';">*</span>
          <FormItem label="所属项目" prop="projectId">
            <Select class="filter-item" :disabled="modalTitle === operatorType[1] && userForm.roleId > 3"
                    v-model="userForm.projectId" clearable placeholder="所属项目">
              <Option v-for="item in projectList" :key="item.id" :value=item.id>{{ item.projectName }}</Option>
            </Select>
          </FormItem>
        </div>
        <div class="r-n-fs-c item-input" style="position: relative">
          <span
              style="position: absolute;left: 2px;color: #ed4014;font-size: 14px;top: 21px;font-family: 'SimSun';">*</span>
          <FormItem label="用户角色" prop="roleId">
            <Select class="filter-item" :disabled="modalTitle === operatorType[1] && userForm.roleId > 3"
                    v-model="userForm.roleId" clearable placeholder="用户角色">
              <Option v-for="item in roleList" :key="item.id" :value="item.id">{{ item.name }}</Option>
            </Select>
          </FormItem>
        </div>
        <label class="r-n-fs-c item-input">
          <!--          <span class="item-input-span"><span style="color: red">*</span>账号名称</span>-->
          <FormItem label="账号名称" prop="userName">
            <Input placeholder="账号名称" v-model="userForm.userName"/>
          </FormItem>
        </label>
        <label class="r-n-fs-c item-input">
          <FormItem label="账户密码" prop="password">
            <Input placeholder="账户密码" v-model="userForm.password"/>
          </FormItem>
        </label>
        <label class="r-n-fs-c item-input">
          <FormItem label="姓名" prop="nickName">
            <Input placeholder="姓名" v-model="userForm.nickName"/>
          </FormItem>
        </label>
        <div class="r-n-fs-c item-input" v-if="userForm.projectId !== null & userForm.projectId !== undefined">
          <FormItem label="头像" prop="avatarUrl">
            <div class="r-n-fs-c" style="width: 100%;padding-left: 3px">
              <img v-if="userForm.avatarUrl !== null && userForm.avatarUrl !== undefined" :src="userForm.avatarUrl"
                   alt="客户端Logo"
                   style="height: 40px;">
              <Upload
                  class="filter-item"
                  style="display: inline-block;"
                  paste
                  name="file"
                  :data=fileUploadParam
                  :headers="headers"
                  accept="['image/jpg','image/jpeg','image/png']"
                  :format="['jpg','jpeg','png']"
                  :show-upload-list="false"
                  :before-upload="imageUploadBefore"
                  :on-success="imageUploadSuccess"
                  :on-format-error="imageUploadFormatError"
                  :on-error="imageUploadError"
                  :action="host+url.file_upload">
                <Button
                    :style="{width:'42px',padding: 0,marginLeft: (userForm.avatarUrl === null || userForm.avatarUrl === undefined) ? '':'10px'}">
                  <div style="width: 42px;height:32px;line-height: 32px;font-size:20px!important;text-align:center;"
                       class="iconfont icon-wenjianshangchuan"></div>
                </Button>
              </Upload>
            </div>
          </FormItem>
        </div>
        <label class="r-n-fs-c item-input">
          <FormItem label="手机号" prop="phone">
            <Input placeholder="手机号" v-model="userForm.phone"/>
          </FormItem>
        </label>
      </Form>
      <div slot="footer">
        <Button type="text" @click="isMessageModalShow=false">取消</Button>
        <Button type="primary" @click="modalOk('userForm')">确定</Button>
      </div>
    </Modal>
    <Modal v-model="modalTip" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>操作确认</span>
      </p>
      <div style="text-align:center">
        <p>{{ modalTipContent }}</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long :loading="modalLoading" @click="modalTipOk">确认操作</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {mapGetters, mapState} from "vuex"
import axios from "axios";
import moment from "moment";
import {Request} from "@/global/config";

export default {
  name: "User",
  computed: {
    ...mapState(["url", "host", "resourceHost", "projectList"]),
    ...mapGetters(["contentHeight"]),
  },
  data() {
    return {
      //精准搜索查询字段
      searchKey: 'nickName',
      //精准搜索查询字段
      searchValue: null,
      //数据是否在加载中
      isLoading: false,
      //确认框是否显示
      modalTip: false,
      //确认框展示内容
      modalTipContent: null,
      //弹出确认操作加载中
      modalLoading: false,
      //操作框是否显示
      isMessageModalShow: false,
      //是否在更改单页数量
      isPageSizeChanging: false,
      //当前弹出框标题
      modalTitle: null,
      //弹出框标题集合
      operatorType: ['用户新建', '用户编辑', '用户禁用', '用户解禁', '用户删除'],
      //用户头像文件上传附加参数
      fileUploadParam: {
        category: 10,
        projectId: null
      },
      //文件上传头信息
      headers: {
        'u-projectId': null,
        'u-uid': null,
        'u-token': null,
      },
      //操作参数
      userForm: {
        id: null,
        userName: null,
        password: null,
        phone: null,
        nickName: null,
        avatarUrl: null,
        roleId: null,
        projectId: null,
      },
      //分页查询参数
      page: {
        total: 0,
        pageSize: 10,
        pageNum: 1,
        descParams: 'id'
      },
      //精确查询可搜索参数
      searchParamList: [
        {
          key: "id",
          show: "用户ID",
        },
        {
          key: "userName",
          show: "账号",
        },
        {
          key: "nickName",
          show: "姓名",
        },
        {
          key: "phone",
          show: "手机号",
        }
      ],
      //参数校验
      ruleValidate: {
        userName: [
          {required: true, type: 'string', message: '账户名称不能为空', trigger: 'change'},
          {required: true, type: 'string', min: 4, message: '账户名称不能少于4个字符', trigger: 'change'},
          {required: true, type: 'string', max: 20, message: '账户名称不能超过20个字符', trigger: 'change'}
        ],
        password: [
          {required: true, type: 'string', message: '账户密码不能为空', trigger: 'change'},
          {required: true, type: 'string', min: 6, message: '账户密码不能少于6个字符', trigger: 'change'},
          {required: true, type: 'string', max: 20, message: '账户密码不能超过20个字符', trigger: 'change'}
        ],
        phone: [
          {type: 'string', length: 11, message: '手机号为11位数字', trigger: 'change'}
        ],
        nickName: [
          {required: true, type: 'string', min: 2, message: '用户名称不能少于2个字符', trigger: 'change'},
          {required: true, type: 'string', max: 20, message: '用户名称不能超过20个字符', trigger: 'change'}
        ],
        roleId: [
          {require: true, type: 'number', message: '请选择用户角色', trigger: 'change'}
        ],
        projectId: [
          {require: true, type: 'number', message: '请选择用户所属项目', trigger: 'change'}
        ]
      },
      //数据表格格式
      tableColumns: [
        {
          title: '用户ID',
          key: 'id',
          fixed: 'left',
          minWidth: 80,
          resizable: true,
          align: "center",
          ellipsis: true,
        },
        {
          title: '用户头像',
          key: 'avatarUrl',
          resizable: true,
          width: 100,
          align: "center",
          render: this.imageRender
        },
        {
          title: '账号',
          key: 'userName',
          resizable: true,
          fixed: 'left',
          minWidth: 150,
          align: "center",
        },
        {
          title: '手机号',
          key: 'phone',
          resizable: true,
          width: 150,
          minWidth: 100,
          align: "center",
          render: function (createElement, e) {
            let {phone} = e.row;
            if (phone === undefined) {
              return createElement('span', '-')
            }
            return createElement('span', phone)
          }
        },
        {
          title: '姓名',
          key: 'nickName',
          resizable: true,
          width: 180,
          align: "center"
        },
        {
          title: '密码',
          key: 'password',
          resizable: true,
          width: 180,
          align: "center"
        },
        {
          title: '在线',
          key: 'isOnline',
          resizable: true,
          width: 70,
          align: "center",
          fixed: 'left',
          render: function (createElement, e) {
            let {isOnline} = e.row;
            if (isOnline) {
              return createElement('Tooltip', {
                attrs: {
                  content: "在线",
                  placement: "top",
                  transfer: true
                }
              }, [createElement('div', {
                style: {
                  height: '15px',
                  width: '15px',
                  borderRadius: '50%',
                  background: '#1afa29'
                }
              }, '')]);
            } else {
              return createElement('Tooltip', {
                attrs: {
                  content: "离线",
                  placement: "top",
                  transfer: true
                }
              }, [createElement('div', {
                style: {
                  height: '15px',
                  width: '15px',
                  borderRadius: '50%',
                  background: '#838383'
                }
              }, '')]);
            }
          }
        },
        {
          title: '状态',
          key: 'state',
          resizable: true,
          width: 70,
          align: "center",
          fixed: 'left',
          render: function (createElement, e) {
            let {state} = e.row;
            if (state === 0) {
              return createElement('Tooltip', {
                attrs: {
                  content: "可用",
                  placement: "top",
                  transfer: true
                }
              }, [createElement('div', {
                style: {
                  height: '15px',
                  width: '15px',
                  borderRadius: '50%',
                  background: '#1afa29'
                }
              }, '')]);
            } else if (state === 1) {
              return createElement('Tooltip', {
                attrs: {
                  content: "禁用",
                  placement: "top",
                  transfer: true
                }
              }, [createElement('div', {
                style: {
                  height: '15px',
                  width: '15px',
                  borderRadius: '50%',
                  background: '#f74242'
                }
              }, '')]);
            }
          }
        },
        {
          title: '最近登录IP',
          key: 'lastIp',
          resizable: true,
          width: 150,
          align: "center",
          render: function (createElement, data) {
            let {lastIp} = data.row;
            if (lastIp === null || lastIp === undefined) {
              return createElement('span', '-');
            }
            return createElement('span', lastIp);
          }
        },
        {
          title: '最近登录时间',
          key: 'lastTime',
          resizable: true,
          width: 180,
          align: "center",
          render: function (createElement, data) {
            let {lastTime} = data.row;
            if (lastTime === null || lastTime === undefined) {
              return createElement('span', '-');
            }
            return createElement('span', moment.unix(lastTime / 1000).format('YYYY-MM-DD HH:mm:ss'));
          }
        },
        {
          title: '所属项目',
          key: 'projectId',
          resizable: true,
          width: 180,
          align: "center",
          fixed: "right",
          render: Request.projectNameRender
        },
        {
          title: '用户权限',
          key: 'roleId',
          resizable: true,
          fixed: 'right',
          width: 120,
          align: "center",
          render: function (createElement, data) {
            let {roleId} = data.row;
            if (roleId === 2) {
              return createElement('span', '企业管理员');
            }
            if (roleId === 3) {
              return createElement('span', '企业用户');
            }
            if (roleId === 4) {
              return createElement('span', '巡线员');
            }
            if (roleId === 5) {
              return createElement('span', '飞手');
            }
          }
        },
        {
          title: '操作',
          fixed: 'right',
          resizable: true,
          width: 260,
          align: "center",
          render: this.operatorRenderFunction
        }
      ],
      //表格数据
      dataList: [],
      //角色列表
      roleList: [],
      //角色ID - 名称键值对
      roleMap: new Map(),
    }
  },
  mounted: function () {
    let self = this;
    this.headers['u-projectId'] = localStorage.getItem('u-projectId');
    this.headers['u-uid'] = localStorage.getItem('u-uid');
    this.headers['u-token'] = localStorage.getItem('u-token');
    //等待获取完所有项目，所有用户角色后初始化获取用户列表数据
    axios.all([self.selectRoleList()]).then(self.axios.spread((roleRsp) => {
      if (roleRsp.data.state === 200) {
        let {records} = roleRsp.data.content;
        self.roleList = records;
        for (let role of self.roleList) {
          self.roleMap.set(role['id'], role['name']);
        }
        self.roleList.splice(0, 1);
      }
      self.selectPageList(self.page);
    }));
  },
  methods: {

    /**
     * 根据参数精确搜索用户
     */
    searchUser() {
      this.page.pageNum = 1;
      this.selectPageList(this.page);
    },

    /**
     * enter键搜索用户
     */
    enterSearchUser(e) {
      if (e.keyCode === 13) {
        this.searchUser();
      }
    },

    /**
     * 搜索数值清理
     */
    searchKeyClear() {
      let self = this;
      self.searchValue = null;
    },

    /**
     * 页数更改
     * @param changedPage
     */
    onPageChange(changedPage) {
      this.page.pageNum = changedPage;
      !this.isPageSizeChanging ? this.selectPageList(this.page) : {};
    },

    /**
     * 单页数量更改
     * @param changedPageSize
     */
    onPageSizeChange(changedPageSize) {
      this.isPageSizeChanging = true;
      new Promise(resolve => {
        this.page.pageSize = changedPageSize;
        resolve(changedPageSize)
      }).then(() => {
        this.selectPageList(this.page);
        this.isPageSizeChanging = false;
      })
    },

    /**
     * 确认弹出框根据弹出框标题执行相应操作
     */
    modalTipOk() {
      this.modalLoading = true;
      switch (this.modalTitle) {
        case this.operatorType[2]: {
          this.disableUser(this.userForm.id, this.userForm.projectId);
        }
          break;
        case this.operatorType[3]: {
          this.enableUser(this.userForm.id, this.userForm.projectId);
        }
          break;
        case this.operatorType[4]: {
          this.deleteUser(this.userForm.id);
        }
          break;
      }
    },

    /**
     * 新增用户
     */
    newUser() {
      let self = this;
      self.modalTitle = self.operatorType[0];
      self.moduleSelectList = [];
      this.$refs['userFormRule'].resetFields();
      this.isMessageModalShow = true;
      this.userForm = {
        id: null,
        userName: null,
        phone: null,
        nickName: null,
        avatarUrl: null,
        roleId: null,
        projectId: null,
      }
    },

    /**
     * 用户头像文件上传前参数赋值，显示加载状态
     */
    imageUploadBefore() {
      this.fileUploadParam.projectId = this.userForm.projectId;
      this.$Spin.show({
        render: (h) => {
          return h('div', [
            h('Icon', {
              'class': 'demo-spin-icon-load',
              props: {
                type: 'ios-loading',
                size: 18
              }
            }),
            h('div', 'Loading')
          ])
        }
      });
    },

    /**
     * 用户头像文件上传成功提示
     * @param response
     */
    imageUploadSuccess(response) {
      this.$Spin.hide();
      if (response.state === 200) {
        let {content} = response;
        this.userForm.avatarUrl = localStorage.getItem("resourceHost") + content;
        this.$Notice.success({
          title: "文件上传",
          desc: "文件上传成功,URL[" + content + "]",
          duration: 10
        })
      } else {
        let {message} = response;
        this.$Notice.error({
          title: "文件上传",
          desc: message,
          duration: 10
        })
      }
    },

    /**
     * 头像文件格式校验
     * @param file
     */
    imageUploadFormatError(file) {
      this.$Spin.hide();
      this.$Notice.warning({
        title: '文件格式错误',
        desc: '文件 ' + file.name + ' 格式不正确，请上传 JPG 或 JPEG 或 PNG 格式文件！',
        duration: 10
      });
    },

    /**
     * 用户头像文件格式校验失败处理
     * @param error
     */
    imageUploadError(error) {
      this.$Spin.hide();
      this.$Notice.error({
        title: "上传失败",
        desc: error,
        duration: 10
      })
    },

    /**
     * 弹出框（新增/修改）确认操作处理
     */
    modalOk() {
      switch (this.modalTitle) {
        case this.operatorType[0]: {
          let isValidate = false;
          this.$refs['userFormRule'].validate((valid) => {
            if (valid) {
              isValidate = true;
            }
          })
          if (!isValidate) {
            return;
          }
          this.insertUser(this.userForm)
        }
          break;
        case this.operatorType[1]: {
          let isValidate = false;
          if (!(this.userForm.id === 2)) {
            this.$refs['userFormRule'].validate((valid) => {
              if (valid) {
                isValidate = true;
              }
            })
            if (!isValidate) {
              return;
            }
          }
          this.updateUser(this.userForm);
        }
          break;
      }
    },

    /**
     * 列表头像图片渲染
     * @param createElement
     * @param data
     * @return {*}
     */
    imageRender(createElement, data) {
      let {avatarUrl} = data.row, self = this;
      return createElement('img', {
        style: {
          height: '25px',
          display: 'inline-block',
          cursor: 'zoom-in'
        },
        attrs: {
          title: '点击查看大图',
          src: avatarUrl
        },
        on: {
          click: function () {
            self.$store.state.imageWindowUrl = avatarUrl;
            self.$store.state.isImageWindowShow = true;
          }
        }
      });
    },

    /**
     * 操作列渲染
     * @param createElement
     * @param data
     * @return {*}
     */
    operatorRenderFunction(createElement, data) {
      let self = this;
      let {id, userName, phone, nickName, avatarUrl, projectId, state, password, roleId} = data.row;
      let btnList = [];
      btnList.push(createElement('Button', {
        'class': 'button-item',
        style: {
          width: '90px',
          border: '#5CADFF 1px dashed',
          color: '#5cadff'
        },
        attrs: {
          type: "dashed"
        },
        nativeOn: {
          click: function () {
            self.$refs['userFormRule'].resetFields();
            self.userForm.id = id;
            self.userForm.userName = userName;
            self.userForm.phone = phone;
            self.userForm.password = password;
            self.userForm.nickName = nickName;
            self.userForm.avatarUrl = avatarUrl;
            self.userForm.roleId = roleId;
            self.userForm.projectId = projectId;
            self.modalTitle = self.operatorType[1];
            self.fileUploadParam.projectId = projectId;
            self.isMessageModalShow = true;
          }
        },
      }, "信息更新"));
      if (state === 0) {
        btnList.push(createElement('Button', {
          'class': 'button-item',
          style: {
            width: '60px',
            border: '#5CADFF 1px dashed',
            color: '#FF6666'
          },
          attrs: {
            type: "dashed"
          },
          nativeOn: {
            click: function () {
              self.userForm.id = id;
              self.userForm.projectId = projectId;
              self.modalTitle = self.operatorType[2];
              self.modalTipContent = '将禁用用户 [' + id + '] ' + userName + ', 是否确认?';
              self.modalTip = true;
            }
          },
        }, "禁用"));
      } else if (state === 1) {
        btnList.push(createElement('Button', {
          'class': 'button-item',
          style: {
            width: '60px',
            border: '#5CADFF 1px dashed',
            color: '#5cadff'
          },
          attrs: {
            type: "dashed"
          },
          nativeOn: {
            click: function () {
              self.userForm.id = id;
              self.userForm.projectId = projectId;
              self.modalTitle = self.operatorType[3];
              self.modalTipContent = '将解禁用户 [' + id + '] ' + userName + ', 是否确认?';
              self.modalTip = true;
            }
          },
        }, "解禁"));
      }
      btnList.push(createElement('Button', {
        'class': 'button-item',
        style: {
          width: '60px',
          border: '#5CADFF 1px dashed',
          color: '#FF6666'
        },
        attrs: {
          type: "dashed"
        },
        nativeOn: {
          click: function () {
            self.userForm.id = id;
            self.modalTitle = self.operatorType[4];
            self.modalTipContent = '将删除用户 [' + id + '] ' + userName + ', 是否确认?';
            self.modalTip = true;
          }
        },
      }, "删除"));
      return createElement("div", {'class': 'r-n-c-c'}, [
        createElement('ButtonGroup', btnList),
      ])
    },

    /**
     * 分页获取用户信息
     * @param userSelectForm
     */
    selectPageList(userSelectForm) {
      let self = this;
      let form = Object.assign({}, userSelectForm);
      if (self.searchKey !== null && self.searchValue !== null && self.searchValue !== "") {
        form[self.searchKey] = self.searchValue.trim();
      }
      self.isLoading = true;
      axios.get(self.url.user_list, {params: form}).then(function (response) {
        let {records, total} = response.data.content;
        self.page.total = total;
        self.dataList = records;
        self.isLoading = false;
      }).catch(function () {
        self.isLoading = false;
      });
    },

    /**
     * 获取用户角色列表
     * @return {Promise<AxiosResponse<any>>}
     */
    selectRoleList() {
      let self = this;
      return axios.get(self.url.role_list, {params: {pageSize: -1, descParams: ''}});
    },

    /**
     * 插入新用户
     * @param userForm 用户新增表单
     */
    insertUser(userForm) {
      let self = this;
      if (userForm.roleId === null || userForm.roleId === undefined) {
        self.$Message.error("请选择用户角色");
        return;
      }
      if (userForm.projectId === null || userForm.projectId === undefined) {
        self.$Message.error("请选择所属项目");
        return;
      }
      let form = Object.assign({}, userForm);
      let avatarUrl = this.userForm.avatarUrl;
      if (avatarUrl !== null) {
        form.avatarUrl = "/" + avatarUrl.substring(avatarUrl.indexOf(avatarUrl.split("/")[3]));
      }
      axios.post(self.url.user_register, form).then(function (response) {
        let {message, state} = response.data;
        if (state === 200) {
          self.isMessageModalShow = false;
          self.selectPageList(self.page);
          self.$Message.success(message);
        } else {
          self.$Message.error(message);
        }
      });
    },

    /**
     * 更新用户
     * @param userForm 用户修改表单
     */
    updateUser(userForm) {
      let self = this;
      let form = Object.assign({}, userForm);
      let avatarUrl = this.userForm.avatarUrl;
      if (avatarUrl !== null && avatarUrl !== undefined) {
        form.avatarUrl = "/" + avatarUrl.substring(avatarUrl.indexOf(avatarUrl.split("/")[3]));
      }
      self.modalTip = false;
      self.modalLoading = false;
      axios.patch(self.url.user_modify, form).then(function (response) {
        let {message, state} = response.data;
        if (state === 200) {
          self.selectPageList(self.page);
          self.$Message.success(message);
        } else {
          self.$Message.error(message);
        }
        self.isMessageModalShow = state !== 200;
      });
    },

    /**
     * 禁用用户
     * @param id
     * @param projectId
     */
    disableUser(id, projectId) {
      this.updateUser({id, projectId, state: 1});
    },

    /**
     * 启用用户
     * @param id
     * @param projectId
     */
    enableUser(id, projectId) {
      this.updateUser({id, projectId, state: 0});
    },

    /**
     * 删除用户
     * @param userId
     */
    deleteUser(userId) {
      let self = this;
      self.modalTip = false;
      self.modalLoading = false;
      axios.delete(self.url.user_delete + userId).then(function (response) {
        let {message, state} = response.data;
        if (state === 200) {
          self.selectPageList(self.page);
          self.$Message.success(message);
        } else {
          self.$Message.error(message);
        }
      });
    },
  }
}
</script>

<style scoped>
#content {
  background: #FFFFFF;
  padding: 15px;
  overflow: auto;
}

.item-input {
  height: 60px;
}

.item-input-span {
  /*height: inherit;*/
  width: 120px;
}

.ivu-form-item-content {
  margin-left: 0 !important;
  position: relative;
  line-height: 32px;
  font-size: 14px;
}

.ivu-form-item {
  margin-bottom: 0;
  width: 100%;
}

.button-item {
  border: #19be6b 1px dashed;
  color: #19be6b;
}

</style>
